<template>
  <div class="container">
    <div class="showCont" v-if="!showTimeOut && showCont">
      <div class="bannerCont">
        <img class="bannerImg" src="/img/bookBanner.png" />
      </div>
      <div class="formCont">
        <div class="formTitle">基本信息</div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">姓名称呼</div>
          </div>
          <input
            class="inputText"
            v-model="formInfo.real_name"
            maxlength="10"
            placeholder="请输入您的姓名或称呼"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">微信号</div>
          </div>
          <input
            class="inputText"
            v-model="formInfo.wechat"
            placeholder="请输入你的微信号"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">手机号</div>
          </div>
          <input
            class="inputText"
            type="tel"
            v-model="formInfo.mobile"
            maxlength="11"
            placeholder="请输入你的手机号"
          />
          <div
            v-if="checkPhone()"
            class="resultTag iconfont icon-gouxuan1"
          ></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">邮箱地址</div>
          </div>
          <input
            class="inputText"
            type="text"
            v-model="formInfo.email"
            placeholder="请输入你的邮箱地址"
          />
          <div
            v-if="checkEmail()"
            class="resultTag iconfont icon-gouxuan1"
          ></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">出生年月</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="date_of_birthShow = true"></div>
            <input
              v-model="formInfo.date_of_birth"
              placeholder="选择你的出生年月"
            />
          </div>
          <div
            @click="date_of_birthShow = true"
            class="iconfont icon-xiala"
          ></div>
        </div>
      </div>
      <div class="formCont">
        <div class="formTitle">职业基本信息</div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">职业方向</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="career_pathShow = true"></div>
            <input
              v-model="formInfo.career_path"
              placeholder="选择你的职业方向"
            />
          </div>
          <div
            @click="career_pathShow = true"
            class="iconfont icon-xiala"
          ></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">工作经验</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="work_experienceShow = true"></div>
            <input
              v-model="formInfo.work_experience"
              placeholder="选择你的工作经验"
            />
          </div>
          <div
            @click="work_experienceShow = true"
            class="iconfont icon-xiala"
          ></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">工作状态</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="work_statusShow = true"></div>
            <input
              v-model="formInfo.work_status"
              placeholder="选择你的工作状态"
            />
          </div>
          <div
            @click="work_statusShow = true"
            class="iconfont icon-xiala"
          ></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">可工作时间</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="work_timeShow = true"></div>
            <input v-model="_work_time" placeholder="选择你可工作的时间" />
          </div>
          <div @click="work_timeShow = true" class="iconfont icon-xiala"></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">工作城市</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="work_addressShow = true"></div>
            <input
              v-model="formInfo.work_address"
              placeholder="选择你所在的城市"
            />
          </div>
          <div
            @click="work_addressShow = true"
            class="iconfont icon-xiala"
          ></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">期望日薪</div>
          </div>
          <input
            class="inputText"
            type="digit"
            v-model="formInfo.salary_day"
            maxlength="5"
            placeholder="请输入你的期望日薪"
          />
          <div class="inputtag">元/天</div>
        </div>
      </div>
      <div class="formCont">
        <div class="formTitle flexTitle">
          <div class="formTitleMust">
            <div class="mustIcon">*</div>
            <div>技能评价</div>
          </div>
          <div v-if="skillArr.length > 0" class="addComp" @click="skillAddFn()">
            +添加技能
          </div>
        </div>
        <div class="sliderItem" :key="index" v-for="(item, index) in skillArr">
          <div class="sliderHead">
            <div class="sliderName">{{ item.name }}</div>
            <van-popover
              placement="bottom-end"
              v-model:show="item.showPopover"
              @open="openSkillCtrlFn(item, index)"
              @select="onSelectSkillCtrl"
              :actions="skillActions"
            >
              <template #reference>
                <div class="compEdit iconfont icon-sandian"></div>
              </template>
            </van-popover>
          </div>
          <div class="sliderCont">
            <van-progress
              :color="setColorFn(item)"
              :percentage="item.value"
              stroke-width="10"
            />
          </div>
        </div>
        <div v-if="skillArr.length == 0" class="formMustTip">
          温馨提示：技能评价至少添加一项
        </div>
        <div
          v-if="skillArr.length == 0"
          class="addCompBtn"
          @click="skillAddFn()"
        >
          +添加技能评价
        </div>
      </div>
      <div class="formCont">
        <div class="formTitle flexTitle">
          <div class="formTitleMust">
            <div class="mustIcon">*</div>
            <div>工作经历</div>
          </div>
          <div v-if="compArr.length > 0" class="addComp" @click="compAddFn()">
            +添加经历
          </div>
        </div>
        <div class="compItem" :key="index" v-for="(item, index) in compArr">
          <div class="compName">
            <div>{{ item.name }}</div>
            <van-popover
              placement="bottom-end"
              v-model:show="item.showPopover"
              @open="openCompCtrlFn(item, index)"
              @select="onSelectCompCtrl"
              :actions="actions"
            >
              <template #reference>
                <div class="compEdit iconfont icon-sandian"></div>
              </template>
            </van-popover>
          </div>
          <div class="compTag">
            <div class="compTagItem">
              <div class="iconfont icon-shenfenzheng"></div>
              <div>{{ item.work }}</div>
            </div>
            <div class="compTagItem">
              <div class="iconfont icon-shijian"></div>
              <div>{{ item.start_time }} ～ {{ item.end_time }}</div>
            </div>
          </div>
          <div class="compDes">
            <van-text-ellipsis
              rows="2"
              :content="item.des"
              expand-text="展开"
              collapse-text="收起"
            />
          </div>
        </div>
        <div v-if="compArr.length == 0" class="formMustTip">
          温馨提示：工作经历至少添加一项
        </div>
        <div v-if="compArr.length == 0" class="addCompBtn" @click="compAddFn()">
          +添加工作经历
        </div>
      </div>
      <div class="formCont">
        <div class="formTitle flexTitle">
          <div class="formTitleMust">
            <div class="mustIcon">*</div>
            <div>作品案例</div>
          </div>
          <div
            v-if="productArr.length > 0"
            class="addComp"
            @click="productAddFn()"
          >
            +添加作品
          </div>
        </div>
        <div
          class="productCont"
          :key="index"
          v-for="(item, index) in productArr"
        >
          <div class="productHead">
            <div>{{ item.name }}</div>
            <div class="productEdit">
              <van-popover
                placement="bottom-end"
                v-model:show="item.showPopover"
                @open="openProductCtrlFn(item, index)"
                @select="onSelectProductCtrl"
                :actions="productActions"
              >
                <template #reference>
                  <div class="productEdit iconfont icon-sandian"></div>
                </template>
              </van-popover>
            </div>
          </div>
          <div class="productDes">项目地址：{{ item.url }}</div>
          <div class="productDes">
            <van-text-ellipsis
              rows="2"
              :content="item.des"
              expand-text="展开"
              collapse-text="收起"
            />
          </div>
          <div class="productImg">
            <div
              @click="showDetailImg(index, item.productImg)"
              :style="'background-image: url(' + item2 + ');'"
              :class="index2 % 4 == 0 ? 'imgItem noLeft' : 'imgItem'"
              :key="index2"
              v-for="(item2, index2) in item.productImg"
            ></div>
          </div>
        </div>
        <div v-if="productArr.length == 0" class="formMustTip">
          温馨提示：至少添加一项作品(建议多添加作品案例)
        </div>
        <div
          v-if="productArr.length == 0"
          class="addCompBtn"
          @click="productAddFn()"
        >
          +添加作品案例
        </div>
      </div>
      <div class="formCont">
        <div class="formTitle flexTitle">
          <div class="formTitleMust">
            <div class="mustIcon">*</div>
            <div>教育经历</div>
          </div>
          <div v-if="eduArr.length > 0" class="addComp" @click="eduAddFn()">
            +添加教育经历
          </div>
        </div>
        <div class="compItem" :key="index" v-for="(item, index) in eduArr">
          <div class="compName">
            <div>{{ item.name }}</div>
            <van-popover
              placement="bottom-end"
              v-model:show="item.showPopover"
              @open="openEduCtrlFn(item, index)"
              @select="onSelectEduCtrl"
              :actions="actions"
            >
              <template #reference>
                <div class="compEdit iconfont icon-sandian"></div>
              </template>
            </van-popover>
          </div>
          <div class="compTag">
            <div class="compTagItem">
              <div class="iconfont icon-shenfenzheng"></div>
              <div>{{ item.leave }}</div>
            </div>
            <div class="compTagItem">
              <div class="iconfont icon-shijian"></div>
              <div>{{ item.start_time }} ～ {{ item.end_time }}</div>
            </div>
          </div>
        </div>
        <div v-if="eduArr.length == 0" class="formMustTip">
          温馨提示：教育经历至少添加一项
        </div>
        <div v-if="eduArr.length == 0" class="addCompBtn" @click="eduAddFn()">
          +添加教育经历
        </div>
      </div>
      <div class="formCont">
        <div class="formTitle flexTitle">
          <div class="formTitleMust">
            <div class="mustIcon">*</div>
            <div>个人介绍</div>
          </div>
        </div>
        <div class="formArea">
          <van-field
            v-model="formInfo.introduce"
            rows="4"
            style="background: none; font-size: 0.7rem"
            type="textarea"
            maxlength="1000"
            placeholder="请对自己做一个评价吧(例如：技术、能力、兴趣、生活等。)"
            show-word-limit
          />
        </div>
      </div>
      <div class="saveBtn" @click="saveFn">保存在线简历</div>
    </div>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="career_pathShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择你的职业方向</div>
        <van-picker
          @change="career_pathChange"
          :show-toolbar="false"
          title="标题"
          :columns="workArr"
        />
        <div class="maskBtn" @click="career_pathSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="work_statusShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">选择你的工作状态</div>
        <div class="maskCheck">
          <div
            @click="work_statusFn(item)"
            :class="
              item.id == work_statusId
                ? 'maskCheckItemActive maskCheckItem'
                : 'maskCheckItem'
            "
            :key="index"
            v-for="(item, index) in work_statusArr"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="maskBtn" @click="work_statusSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="work_timeShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">
          <div>可工作时间</div>
          <div class="maskHeadTip">最少选择一项时间</div>
        </div>
        <div class="work_timeCont">
          <div
            class="work_timeItem"
            :key="index"
            v-for="(item, index) in work_timeArr"
          >
            <div class="timeItemHead">
              <div
                @click="item.check = !item.check"
                :class="
                  item.check
                    ? 'timeCheck iconfont icon-gouxuan1 activeCheck'
                    : 'timeCheck iconfont icon-gouxuan1'
                "
              ></div>
              <div class="timeHeadName">{{ item.name }}</div>
            </div>
            <div class="checkItem">
              <div class="checkItemName">开始时间</div>
              <div
                class="checkItemVal"
                @click="checkWorkTimeFn(item, index, 0)"
              >
                <div class="checkTimeVal">{{ item.start_time }}</div>
                <div class="iconfont icon-xiala"></div>
              </div>
            </div>
            <div class="checkItem">
              <div class="checkItemName">结束时间</div>
              <div
                class="checkItemVal"
                @click="checkWorkTimeFn(item, index, 1)"
              >
                <div class="checkTimeVal">{{ item.end_time }}</div>
                <div class="iconfont icon-xiala"></div>
              </div>
            </div>
          </div>
        </div>
        <div
          :class="regWorkTimeFn() ? 'maskBtn' : 'maskBtn disMaskBtn'"
          @click="work_timeSureFn"
        >
          {{ regWorkTimeFn() ? "确认选择" : "请选择可工作时间" }}
        </div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="showCheckTime"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择开始工作时间</div>
        <van-time-picker
          v-model="currentTime"
          :show-toolbar="false"
          title="选择时间"
        />
        <div class="maskBtn" @click="sureCheckTime">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="work_addressShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择你所在的城市</div>
        <van-area
          :columns-num="2"
          @change="work_addressChange"
          confirm-button-text=""
          cancel-button-text=""
          :area-list="areaList"
        />
        <div class="maskBtn" @click="work_addressSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="work_experienceShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择你的工作经验</div>
        <div class="sildNum">
          <span>{{ _work_experience }}年</span>
        </div>
        <van-slider
          class="sliderCont"
          bar-height="4px"
          active-color="#86a9fb"
          v-model="_work_experience"
          :min="1"
          :max="25"
        />
        <div class="maskBtn" @click="work_experienceSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="date_of_birthShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择你的出生年月</div>
        <van-date-picker
          v-model="currentDate"
          title="选择年月"
          :show-toolbar="false"
          :min-date="minDate"
          :max-date="maxDate"
          :columns-type="columnsType"
        />
        <div class="maskBtn" @click="date_of_birthSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="compArr.length > 0"
      v-model:show="compShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">
          {{ compMaskType == 0 ? "添加" : "修改" }}工作经历信息
        </div>
        <div class="maskForm">
          <div class="formInput">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">公司名称</div>
            </div>
            <input
              class="inputText"
              v-model="compMaskData.name"
              maxlength="15"
              placeholder="请输入公司名称"
            />
          </div>
          <div class="formInput">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">任职职位</div>
            </div>
            <input
              class="inputText"
              v-model="compMaskData.work"
              maxlength="15"
              placeholder="请输入任职职位"
            />
          </div>
          <div class="formInput">
            <div class="inputName">
              <div class="inputName">
                <div class="mustIcon">*</div>
                <div class="inputNameText">开始时间</div>
              </div>
            </div>
            <div class="inputOut">
              <div class="inputMask" @click="checkCompTimeFn(0)"></div>
              <input
                v-model="compMaskData.start_time"
                placeholder="请选择开始时间"
              />
            </div>
            <div @click="checkCompTimeFn(0)" class="iconfont icon-xiala"></div>
          </div>
          <div class="formInput">
            <div class="inputName">
              <div class="inputName">
                <div class="mustIcon">*</div>
                <div class="inputNameText">结束时间</div>
              </div>
            </div>
            <div class="inputOut">
              <div class="inputMask" @click="checkCompTimeFn(1)"></div>
              <input
                v-model="compMaskData.end_time"
                placeholder="请选择结束时间"
              />
            </div>
            <div @click="checkCompTimeFn(1)" class="iconfont icon-xiala"></div>
          </div>
          <div class="formTitle">
            <div class="mustIcon">*</div>
            <div>工作内容</div>
          </div>
          <div class="formArea">
            <van-field
              v-model="compMaskData.des"
              rows="4"
              style="background: none; font-size: 0.7rem"
              type="textarea"
              maxlength="1000"
              placeholder="请详细描述工作内容"
              show-word-limit
            />
          </div>
        </div>
        <div
          :class="regCompFn() ? 'maskBtn' : 'maskBtn disMaskBtn'"
          @click="compMaskSureFn"
        >
          {{ regCompFn() ? "确认保存信息" : "完善资料可提交" }}
        </div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="checkCompTimeShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">
          请{{ compMaskTimeType % 2 == 0 ? "选择开始时间" : "选择结束时间" }}
        </div>
        <van-date-picker
          v-model="_compCheckTime"
          title="选择年月"
          :show-toolbar="false"
          :min-date="comp_minDate"
          :max-date="comp_maxDate"
        />
        <div v-if="compMaskTimeType % 2 == 1" class="maskCtrl">
          <div class="maskBtn whiteMaskBtn" @click="_checkCompTimeSureFn">
            选择-至今
          </div>
          <div class="maskBtn" @click="checkCompTimeSureFn">确认选择</div>
        </div>
        <div
          v-if="compMaskTimeType % 2 == 0"
          class="maskBtn"
          @click="checkCompTimeSureFn"
        >
          确认选择
        </div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="skillArr.length > 0"
      v-model:show="skillShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">
          <div>请选择你的技能标签</div>
        </div>
        <van-picker
          @change="skillChange"
          :show-toolbar="false"
          title="标题"
          :columns="skillAllArr"
        />
        <div
          :class="showSkillRedTip ? 'maskBtn disMaskBtn' : 'maskBtn'"
          @click="skillSureFn"
        >
          {{ showSkillRedTip ? "此项技能评价已存在" : "确认选择" }}
        </div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="skillNumShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请给你的技能水平打分</div>
        <div class="sildNum smallText">
          <span>{{ _skillName }} ({{ _skillNum }} 分)</span>
        </div>
        <van-slider
          class="sliderCont"
          bar-height="4px"
          active-color="#86a9fb"
          :step="10"
          v-model="_skillNum"
          :min="10"
          :max="100"
        />
        <div class="maskBtn" @click="silderSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="productArr.length > 0"
      v-model:show="productShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">
          {{ productMaskType == 0 ? "添加" : "修改" }}作品案例
        </div>
        <div class="maskForm">
          <div class="formInput">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">作品名称</div>
            </div>
            <input
              class="inputText"
              v-model="productMaskData.name"
              maxlength="15"
              placeholder="请输入作品名称"
            />
          </div>
          <div class="formInput">
            <div class="inputName">
              <div class="inputNameText">作品链接</div>
            </div>
            <input
              class="inputText"
              v-model="productMaskData.url"
              placeholder="请输入作品链接"
            />
          </div>
          <div class="formTitle">
            <div class="mustIcon">*</div>
            <div>作品截图</div>
          </div>
          <div class="upProduct">
            <van-uploader
              @delete="deleteProductImg"
              :preview-size="($docWidth * 0.92 - 40) / 4"
              v-model="_fileList"
              :after-read="afterRead"
              multiple
              :max-count="8"
            />
          </div>
          <div class="formTitle">
            <div class="mustIcon">*</div>
            <div>作品描述</div>
          </div>
          <div class="formArea">
            <van-field
              v-model="productMaskData.des"
              rows="4"
              style="background: none; font-size: 0.7rem"
              type="textarea"
              maxlength="1000"
              placeholder="请详细描述作品(例如：项目介绍、功能介绍、技术介绍等)"
              show-word-limit
            />
          </div>
        </div>
        <div
          :class="regProductFn() ? 'maskBtn' : 'maskBtn disMaskBtn'"
          @click="productMaskSureFn"
        >
          {{ regProductFn() ? "确认保存信息" : "完善资料可提交" }}
        </div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="eduArr.length > 0"
      v-model:show="eduShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">
          {{ eduMaskType == 0 ? "添加" : "修改" }}教育经历信息
        </div>
        <div class="maskForm">
          <div class="formInput">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">学校名称</div>
            </div>
            <input
              class="inputText"
              v-model="eduMaskData.name"
              maxlength="15"
              placeholder="请输入学校名称"
            />
          </div>
          <div class="formInput">
            <div class="inputName">
              <div class="inputName">
                <div class="mustIcon">*</div>
                <div class="inputNameText">学历等级</div>
              </div>
            </div>
            <div class="inputOut">
              <div class="inputMask" @click="checkEdu"></div>
              <input v-model="eduMaskData.leave" placeholder="请选择学历等级" />
            </div>
            <div @click="checkEdu" class="iconfont icon-xiala"></div>
          </div>
          <div class="formInput">
            <div class="inputName">
              <div class="inputName">
                <div class="mustIcon">*</div>
                <div class="inputNameText">开始时间</div>
              </div>
            </div>
            <div class="inputOut">
              <div class="inputMask" @click="checkCompTimeFn(2)"></div>
              <input
                v-model="eduMaskData.start_time"
                placeholder="请选择开始时间"
              />
            </div>
            <div @click="checkCompTimeFn(2)" class="iconfont icon-xiala"></div>
          </div>
          <div class="formInput">
            <div class="inputName">
              <div class="inputName">
                <div class="mustIcon">*</div>
                <div class="inputNameText">结束时间</div>
              </div>
            </div>
            <div class="inputOut">
              <div class="inputMask" @click="checkCompTimeFn(3)"></div>
              <input
                v-model="eduMaskData.end_time"
                placeholder="请选择结束时间"
              />
            </div>
            <div @click="checkCompTimeFn(3)" class="iconfont icon-xiala"></div>
          </div>
        </div>
        <div
          :class="regEduFn() ? 'maskBtn' : 'maskBtn disMaskBtn'"
          @click="eduMaskSureFn"
        >
          {{ regEduFn() ? "确认保存信息" : "完善资料可提交" }}
        </div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="checkEduLeaveShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择学历等级</div>
        <van-picker
          title="标题"
          :show-toolbar="false"
          :columns="checkEduArr"
          @change="checkEduChange"
        />
        <div class="maskBtn" @click="checkEduLeaveSure">确认选择</div>
      </div>
    </van-popup>
    <van-image-preview
      :startPosition="startPosition"
      v-model:show="showVantImg"
      :images="priveImg"
    >
    </van-image-preview>
    <subLoad v-if="showSub"></subLoad>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<script>
import $ from "jquery";
import { areaList } from "@vant/area-data";
import subLoad from "@/components/public/subLoad.vue";

import {
  showSuccessToast,
  showFailToast,
  showToast,
  showConfirmDialog,
} from "vant";
import { cvSave, cvShow, My } from "@/http/api";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
export default {
  components: { subLoad, load, getTimeOut },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showSub: false,
      // 弹窗开关控制
      career_pathShow: false,
      work_addressShow: false,
      work_experienceShow: false,
      date_of_birthShow: false,
      work_statusShow: false,
      work_timeShow: false,
      showCheckTime: false,
      compShow: false,
      checkCompTimeShow: false,
      skillShow: false,
      skillNumShow: false,
      showSkillRedTip: false,
      productShow: false,
      eduShow: false,
      checkEduLeaveShow: false,
      // 单独特定的表单变量
      currentDate: ["2000", "01"], //出生年月
      _work_experience: 1,
      work_statusId: 0,
      _work_time: "",
      _checkTypeType: 0,
      _compCheckTime: ["2020", "01", "01"],
      _skillName: "",
      _skillNum: 80,
      _fileList: [], //作品案例图片上传数组
      // 表单数据
      formInfo: {
        real_name: "",
        career_path: "",
        work_address: "",
        work_experience: "",
        date_of_birth: "",
        wechat: "",
        mobile: "",
        salary_day: "",
        email: "",
        work_status: "",
        work_time: "",
        introduce: "",
        skill: [],
        work_undergo: [],
        works_case: [],
        education_undergo: [],
      },
      // 数组数据
      work_statusArr: [
        { name: "正常工作", id: 0 },
        { name: "自由工作", id: 1 },
        { name: "求职中", id: 2 },
      ], //工作状态数组
      workArr: [], //职位数组
      areaList: areaList, //地区数组
      columnsType: ["year", "month"], //日期格式
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2010, 11, 31),
      comp_minDate: new Date(2000, 0, 1),
      comp_maxDate: new Date(
        new Date().getFullYear(),
        new Date().getMonth() - 1,
        31
      ),
      work_timeArr: [
        {
          name: "工作日",
          check: false,
          start_time: "09:00",
          end_time: "23:00",
        },
        { name: "周末", check: false, start_time: "09:00", end_time: "23:00" },
      ],
      currentTime: ["12", "00"], //工作时间当前弹窗选择的中间点
      checkTimeIndex: 0, //工作时间弹窗index
      checkTimeType: 0, //工作时间弹窗类型（start｜｜end）
      compArr: [], //工作经历
      skillAllArr: [], //全部技能选项
      skillArr: [], //技能评价数组
      productArr: [], //作品案例
      eduArr: [], //教育经历
      checkEduArr: [
        { text: "初中及以下", value: "初中及以下" },
        { text: "高中", value: "高中" },
        { text: "专科", value: "专科" },
        { text: "本科", value: "本科" },
        { text: "硕士", value: "硕士" },
        { text: "博士", value: "博士" },
      ], //学历等级数组
      actions: [{ text: "编辑经历" }, { text: "删除经历" }],
      skillActions: [{ text: "编辑技能" }, { text: "删除技能" }],
      productActions: [{ text: "编辑作品" }, { text: "删除作品" }],
      // 工作经历
      compMaskData: {},
      compMaskTimeType: 0,
      editCompIndex: "",
      compMaskType: 0, //0为新增，1为编辑(工作经历)
      // 技能
      editSkillIndex: "",
      skillMaskType: 0, //0为新增，1为编辑(技能评价)
      // 作品
      productMaskData: {},
      editProductIndex: "",
      productMaskType: 0, //0为新增，1为编辑(作品案例)
      // 教育
      eduMaskData: {},
      eduMaskTimeType: 0,
      editEduIndex: "",
      eduMaskType: 0, //0为新增，1为编辑(工作经历)
      //图片放大查看
      priveImg: [],
      showVantImg: false,
      startPosition: 0,
    };
  },
  props: {},
  setup() {},
  methods: {
    // 保存工作经历
    eduMaskSureFn() {
      if (this.eduMaskData.name.length < 2) {
        showToast({ message: "学校名称不能低于2个字符" });
        return false;
      } else if (this.eduMaskData.leave == "") {
        showToast({ message: "请选择学历" });
        return false;
      } else if (this.eduMaskData.start_time.length == "") {
        showToast({ message: "请选择开始时间" });
        return false;
      } else if (this.eduMaskData.end_time.length == "") {
        showToast({ message: "请选择结束时间" });
        return false;
      } else if (this.eduMaskData.start_time >= this.eduMaskData.end_time) {
        showToast({ message: "开始时间不能大于结束时间" });
        return false;
      }
      if (this.eduMaskType == 0) {
        this.eduArr.push(this.eduMaskData);
      } else {
        this.eduArr[this.editEduIndex] = this.eduMaskData;
      }
      this.eduShow = false;
    },
    //筛选学历
    checkEduLeaveSure() {
      if (this.eduMaskData.leave == "") {
        this.eduMaskData.leave = "初中及以下";
      }
      this.checkEduLeaveShow = false;
    },
    // 选择学历change函数
    checkEduChange(selectedValues, selectedOptions) {
      this.eduMaskData.leave = selectedValues.selectedValues[0];
    },
    //选择学历
    checkEdu() {
      this.checkEduLeaveShow = true;
    },
    // 验证教育表单
    regEduFn() {
      if (this.eduMaskData.name.length < 2) {
        return false;
      } else if (this.eduMaskData.leave == "") {
        return false;
      } else if (this.eduMaskData.start_time.length == "") {
        return false;
      } else if (this.eduMaskData.end_time.length == "") {
        return false;
      } else if (this.eduMaskData.start_time >= this.eduMaskData.end_time) {
        return false;
      }
      return true;
    },
    //教育控制台
    openEduCtrlFn(item, index) {
      this.eduMaskData = item;
      this.editCompIndex = index;
    },
    // 选择教育控制项
    onSelectEduCtrl(e) {
      if (e.text == "编辑经历") {
        this.eduMaskType = 1;
        this._checkTypeType = 1;
        this.eduShow = true;
      } else {
        showConfirmDialog({
          title: "删除提示",
          message: "确认删除此项教育经历吗？",
        })
          .then(() => {
            this.eduArr.splice(this.editEduIndex, 1);
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    //添加教育经历
    eduAddFn() {
      this.eduMaskData = {
        showPopover: false,
        name: "",
        leave: "",
        start_time: "",
        end_time: "",
      };
      this._checkTypeType = 1;
      this.eduMaskType = 0;
      this.eduShow = true;
    },
    // 作品图放大显示
    showDetailImg(index, imgs) {
      this.startPosition = index;
      this.priveImg = imgs;
      this.showVantImg = true;
    },
    //选择作品案例图片上传之后结果
    afterRead(file) {
      if (!Array.isArray(file)) {
        file = [file];
      }
      for (let i = 0; i < file.length; i++) {
        file[i].message = "上传中";
        file[i].status = "uploading";
        setTimeout(() => {
          var fileObj = file[i].file; //获得文件上传的输入框的文件流
          var formData = new FormData(); // 可以增加表单数据
          formData.append("file", fileObj);
          $.ajax({
            url: this.apis + "/common/Upload/UpImg",
            dataType: "json",
            type: "post",
            processData: false,
            contentType: false,
            data: formData,
            success: (res) => {
              if (res.code == 1) {
                file[i].url = res.data.src;
                file[i].message = "";
                file[i].status = "";
              } else {
                file[i].message = "上传失败";
                file[i].status = "failed";
              }
              if (i == file.length - 1) {
                setTimeout(() => {
                  this.setProductImg();
                }, 500);
              }
            },
          }).catch(() => {
            showFailToast("网络超时");
            file[i].message = "上传失败";
            file[i].status = "failed";
          });
        }, 10);
      }
    },
    deleteProductImg(e) {
      this.setProductImg();
    },
    //实时更新上传的作品图片
    setProductImg() {
      this.productMaskData.productImg = [];
      console.log(this._fileList);
      if (this._fileList.length > 0) {
        for (let i = 0; i < this._fileList.length; i++) {
          if (!this._fileList[i].status) {
            this.productMaskData.productImg.push(this._fileList[i].url);
          }
        }
      }
      console.log(this._fileList);
    },
    openProductCtrlFn(item, index) {
      this.productMaskData = item;
      this._fileList = [];
      for (let i = 0; i < item.productImg.length; i++) {
        this._fileList.push({
          url: item.productImg[i],
          file: "",
          status: "",
          content: "",
          message: "",
        });
      }
      this.editProductIndex = index;
    },
    // 作品案例控制器
    onSelectProductCtrl(e) {
      if (e.text == "编辑作品") {
        this.productMaskType = 1;
        this.productShow = true;
      } else {
        showConfirmDialog({
          title: "删除提示",
          message: "确认删除此项作品案例吗？",
        })
          .then(() => {
            this.productArr.splice(this.editProductIndex, 1);
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    //确认提交新增、编辑的作品
    productMaskSureFn() {
      if (this.productMaskData.name.length < 2) {
        showToast({ message: "作品名称不能低于2个字符" });
        return false;
      } else if (this.productMaskData.des.length < 20) {
        showToast({ message: "作品描述不能低于20个字符" });
        return false;
      } else if (this.productMaskData.productImg.length == 0) {
        showToast({ message: "作品截图不能为空" });
        return false;
      }
      console.log(this.productMaskData);
      if (this.productMaskType == 0) {
        this.productArr.push(this.productMaskData);
      } else {
        this.productArr[this.editProductIndex] = this.productMaskData;
      }
      this.productShow = false;
    },
    // 验证作品案例是否可提交
    regProductFn() {
      if (this.productMaskData.name.length < 2) {
        return false;
      } else if (this.productMaskData.des.length < 20) {
        return false;
      } else if (this.productMaskData.productImg.length == 0) {
        return false;
      }
      return true;
    },
    // 点击新增作品案例显示弹窗
    productAddFn() {
      this.productMaskData = {
        showPopover: false,
        name: "",
        url: "",
        des: "",
        productImg: [],
      };
      this._fileList = [];
      this.productMaskType = 0;
      this.productShow = true;
    },
    //设置技能的背景颜色
    setColorFn(item) {
      if (item.value <= 20) {
        return "#a6a6a6";
      } else if (item.value <= 40) {
        return "#ffc060";
      } else if (item.value <= 60) {
        return "#5ce1e6";
      } else if (item.value <= 80) {
        return "#2080ff";
      } else if (item.value >= 80) {
        return "#00bf63";
      }
    },
    //技能编辑控制器
    onSelectSkillCtrl(e) {
      if (e.text == "编辑技能") {
        this.skillMaskType = 1;
        this.skillNumShow = true;
      } else {
        showConfirmDialog({
          title: "删除提示",
          message: "确认删除此项技能评价吗？",
        })
          .then(() => {
            this.skillArr.splice(this.editSkillIndex, 1);
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    // 技能编辑删除控制打开
    openSkillCtrlFn(item, index) {
      this._skillName = item.name;
      this._skillNum = item.value;
      this.editSkillIndex = index;
    },
    //确认新增编辑技能
    silderSureFn() {
      if (this.skillMaskType == 0) {
        this.skillArr.push({ name: this._skillName, value: this._skillNum });
      } else {
        this.skillArr[this.editSkillIndex] = {
          name: this._skillName,
          value: this._skillNum,
        };
      }
      this.skillNumShow = false;
    },
    //选择技能变化触发
    skillChange(selectedValues, selectedOptions, selectedIndexes, columnIndex) {
      this._skillName = selectedValues.selectedValues[1];
      let result = false;
      for (let i = 0; i < this.skillArr.length; i++) {
        if (this.skillArr[i].name == this._skillName) {
          result = true;
        }
      }
      this.showSkillRedTip = result;
    },
    // 技能评价新增
    skillAddFn() {
      this.skillMaskType = 0;
      this.skillShow = true;
    },
    //显示技能评分
    skillSureFn() {
      if (this._skillName == "") {
        this._skillName = "C++";
      }
      let result = false;
      for (let i = 0; i < this.skillArr.length; i++) {
        if (this.skillArr[i].name == this._skillName) {
          result = true;
          // showToast({message:'此技能评分已存在'});
          return false;
        }
      }
      this.showSkillRedTip = true;
      if (result) {
        return false;
      }
      this.skillShow = false;
      this.skillNumShow = true;
    },
    //工作经历控制器
    onSelectCompCtrl(e) {
      if (e.text == "编辑经历") {
        this.compMaskType = 1;
        this._checkTypeType = 0;
        this.compShow = true;
        console.log(this.compMaskData);
      } else {
        showConfirmDialog({
          title: "删除提示",
          message: "确认删除此项工作经历吗？",
        })
          .then(() => {
            this.compArr.splice(this.editCompIndex, 1);
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    openCompCtrlFn(item, index) {
      this.compMaskData = item;
      this.editCompIndex = index;
    },
    // 验证工作经历提交
    regCompFn() {
      if (this.compMaskData.name.length < 2) {
        return false;
      } else if (this.compMaskData.work.length < 2) {
        return false;
      } else if (this.compMaskData.start_time.length == "") {
        return false;
      } else if (this.compMaskData.end_time.length == "") {
        return false;
      } else if (this.compMaskData.start_time >= this.compMaskData.end_time) {
        return false;
      } else if (this.compMaskData.des.length < 30) {
        return false;
      }
      return true;
    },
    // 保存工作经历
    compMaskSureFn() {
      if (this.compMaskData.name.length < 2) {
        showToast({ message: "公司名称不能低于2个字符" });
        return false;
      } else if (this.compMaskData.work.length < 2) {
        showToast({ message: "任职职位不能低于2个字符" });
        return false;
      } else if (this.compMaskData.start_time.length == "") {
        showToast({ message: "请选择开始时间" });
        return false;
      } else if (this.compMaskData.end_time.length == "") {
        showToast({ message: "请选择结束时间" });
        return false;
      } else if (this.compMaskData.start_time >= this.compMaskData.end_time) {
        showToast({ message: "开始时间不能大于结束时间" });
        return false;
      } else if (this.compMaskData.des.length < 30) {
        showToast({ message: "工作内容不能低于30个字符" });
        return false;
      }

      if (this.compMaskType == 0) {
        this.compArr.push(this.compMaskData);
      } else {
        this.compArr[this.editCompIndex] = this.compMaskData;
      }
      this.compShow = false;
    },
    //确认选择工作经历时间
    checkCompTimeSureFn() {
      if (this.compMaskTimeType == 0) {
        this.compMaskData.start_time = this._compCheckTime.join("-");
      } else if (this.compMaskTimeType == 1) {
        this.compMaskData.end_time = this._compCheckTime.join("-");
      } else if (this.compMaskTimeType == 2) {
        this.eduMaskData.start_time = this._compCheckTime.join("-");
      } else if (this.compMaskTimeType == 3) {
        this.eduMaskData.end_time = this._compCheckTime.join("-");
      }
      this.checkCompTimeShow = false;
    },
    //选择至今时间
    _checkCompTimeSureFn() {
      if (this.compMaskTimeType == 1) {
        this.compMaskData.end_time = "至今";
      } else if (this.compMaskTimeType == 3) {
        this.eduMaskData.end_time = "至今";
      }
      this.checkCompTimeShow = false;
    },
    // 显示选择工作经历时间弹窗
    checkCompTimeFn(type) {
      if (type == 0) {
        if (this.compMaskData.start_time) {
          this._compCheckTime = this.compMaskData.start_time.split("-");
        } else {
          this._compCheckTime = ["2020", "01"];
        }
      } else if (type == 1) {
        if (
          this.compMaskData.end_time != "至今" &&
          this.compMaskData.end_time
        ) {
          this._compCheckTime = this.compMaskData.end_time.split("-");
        } else {
          this._compCheckTime = ["2020", "01", "01"];
        }
      } else if (type == 2) {
        if (this.eduMaskData.start_time) {
          this._compCheckTime = this.eduMaskData.start_time.split("-");
        } else {
          this._compCheckTime = ["2020", "01"];
        }
      } else if (type == 3) {
        if (this.eduMaskData.end_time != "至今" && this.eduMaskData.end_time) {
          this._compCheckTime = this.eduMaskData.end_time.split("-");
        } else {
          this._compCheckTime = ["2020", "01", "01"];
        }
      }
      this.compMaskTimeType = type;
      this.checkCompTimeShow = true;
    },
    //新增工作经历
    compAddFn() {
      this.compMaskData = {
        showPopover: false,
        name: "",
        work: "",
        start_time: "",
        end_time: "",
        des: "",
      };
      this._checkTypeType = 0;
      this.compMaskType = 0;
      this.compShow = true;
    },
    // 选择工作时间范围
    checkWorkTimeFn(item, index, type) {
      if (type == 0) {
        this.currentTime = item.start_time.split(":");
      } else {
        this.currentTime = item.end_time.split(":");
      }
      this.checkTimeIndex = index;
      this.checkTimeType = type;
      this.showCheckTime = true;
    },
    sureCheckTime() {
      if (this.checkTimeType == 0) {
        this.work_timeArr[this.checkTimeIndex].start_time =
          this.currentTime.join(":");
      } else {
        this.work_timeArr[this.checkTimeIndex].end_time =
          this.currentTime.join(":");
      }
      this.showCheckTime = false;
    },
    //验证邮箱
    checkEmail() {
      const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      return regex.test(this.formInfo.email);
    },
    // 验证手机号
    checkPhone() {
      let reg = /^1[3456789]{1}\d{9}$/;
      if (reg.test(this.formInfo.mobile)) {
        return true;
      } else {
        return false;
      }
    },
    //可工作时间确认
    work_timeSureFn() {
      let timeStrArr = [];
      let _timeStrArr = [];
      for (let i = 0; i < this.work_timeArr.length; i++) {
        if (this.work_timeArr[i].check) {
          _timeStrArr.push({
            name: this.work_timeArr[i].name,
            start_time: this.work_timeArr[i].start_time,
            end_time: this.work_timeArr[i].end_time,
          });
          timeStrArr.push(
            this.work_timeArr[i].name +
              "(" +
              this.work_timeArr[i].start_time +
              "~" +
              this.work_timeArr[i].end_time +
              ")"
          );
        }
      }
      if (timeStrArr.length == 0) {
        return false;
      }
      this._work_time = timeStrArr.join(",");
      this.formInfo.work_time = _timeStrArr;
      this.work_timeShow = false;
    },
    // 正则验证工作时间
    regWorkTimeFn() {
      if (this.work_timeArr[0].check || this.work_timeArr[1].check) {
        return true;
      } else {
        false;
      }
    },
    //出生年月
    date_of_birthSureFn() {
      this.formInfo.date_of_birth = this.currentDate.join("-");
      this.date_of_birthShow = false;
    },
    // 工作状态
    work_statusFn(item) {
      this.formInfo.work_status = item.name;
      this.work_statusId = item.id;
    },
    work_statusSureFn() {
      if (this.formInfo.work_status == "") {
        this.formInfo.work_status = "正常工作";
      }
      this.work_statusShow = false;
    },
    //工作经验
    work_experienceChange() {},
    work_experienceSureFn() {
      this.formInfo.work_experience = this._work_experience + "年";
      this.work_experienceShow = false;
    },
    //选择城市
    work_addressChange(selectedValues, selectedOptions) {
      if (selectedValues.selectedOptions.length > 0) {
        this.formInfo.work_address = selectedValues.selectedOptions[1].text;
      }
    },
    work_addressSureFn() {
      if (this.formInfo.work_address == "") {
        this.formInfo.work_address = "北京市";
      }
      this.work_addressShow = false;
    },
    // 工作职位
    career_pathChange(
      selectedValues,
      selectedOptions,
      selectedIndexes,
      columnIndex
    ) {
      this.formInfo.career_path = selectedValues.selectedValues.join("-");
    },
    career_pathSureFn() {
      if (this.formInfo.career_path == "") {
        this.formInfo.career_path =
          this.workArr[0].text + "-" + this.workArr[0].children[0].text;
      }
      this.career_pathShow = false;
    },
    changeAttr() {
      this.formInfo.skill = this.skillArr; //技能
      this.formInfo.works_case = [];
      if (this.productArr.length > 0) {
        //作品
        for (let i = 0; i < this.productArr.length; i++) {
          this.formInfo.works_case.push({
            works_name: this.productArr[i].name,
            works_url: this.productArr[i].url,
            works_img: this.productArr[i].productImg.join(","),
            works_content: this.productArr[i].des,
          });
        }
      }
      this.formInfo.work_undergo = [];
      if (this.compArr.length > 0) {
        //工作经历
        for (let i = 0; i < this.compArr.length; i++) {
          this.formInfo.work_undergo.push({
            company_name: this.compArr[i].name,
            position: this.compArr[i].work,
            start_time: this.compArr[i].start_time,
            end_time: this.compArr[i].end_time,
            work_content: this.compArr[i].des,
          });
        }
      }
      this.formInfo.education_undergo = [];
      if (this.eduArr.length > 0) {
        //学历
        for (let i = 0; i < this.eduArr.length; i++) {
          this.formInfo.education_undergo.push({
            school_name: this.eduArr[i].name,
            education: this.eduArr[i].leave,
            start_time: this.eduArr[i].start_time,
            end_time: this.eduArr[i].end_time,
          });
        }
      }
    }, //转化字段
    checkSub(data) {
      if (!data.real_name) {
        showToast("请输入姓名称呼");
        return false;
      } else if (!data.wechat) {
        showToast("请输入微信号");
        return false;
      } else if (!this.checkPhone()) {
        showToast("请输入正确手机号");
        return false;
      } else if (!this.checkEmail()) {
        showToast("请输入正确邮箱地址");
        return false;
      } else if (!data.date_of_birth) {
        showToast("请选择出生日期");
        return false;
      } else if (!data.career_path) {
        showToast("请选择职业方向");
        return false;
      } else if (!data.work_experience) {
        showToast("请选择工作经验");
        return false;
      } else if (!data.work_status) {
        showToast("请选择工作状态");
        return false;
      } else if (data.work_time.length == 0) {
        showToast("请选择可工作时间");
        return false;
      } else if (!data.work_address) {
        showToast("请选择工作城市");
        return false;
      } else if (!data.salary_day) {
        showToast("请输入期望日薪资");
        return false;
      } else if (data.skill.length == 0) {
        showToast("请至少添加一项技能");
        return false;
      } else if (data.work_undergo.length == 0) {
        showToast("请至少添加一项工作经历");
        return false;
      } else if (data.works_case.length == 0) {
        showToast("请至少添加一项作品案例");
        return false;
      } else if (data.education_undergo.length == 0) {
        showToast("请至少添加一项教育经历");
        return false;
      } else if (!data.introduce) {
        showToast("请输入自我介绍");
        return false;
      } else {
        return true;
      }
    },
    saveFn() {
      let data = this.formInfo;
      this.changeAttr();
      let result = this.checkSub(data);
      if (result) {
        this.showSub = true;
        cvSave(data)
          .then((res) => {
            if (res.data.code == 1) {
              showSuccessToast("编辑成功");
              this.$router.back();
            } else {
              showToast(res.data.msg);
            }
            this.showSub = false;
          })
          .catch((res) => {
            this.showSub = false;
          });
      }
    },
    dataSet(data) {
      // 设置可工作时间
      let workTime = data.work_time;
      for (let i = 0; i < workTime.length; i++) {
        workTime[i]["check"] = true;
        if (i > 0) {
          this._work_time += ",";
        }
        this._work_time +=
          workTime[i].name +
          "(" +
          workTime[i].start_time +
          "~" +
          workTime[i].end_time +
          ")";
      }
      this.work_timeArr = workTime;
      // 设置技能
      this.skillArr = data.skill;
      // 工作经历
      this.compArr = [];
      let comp = data.work_undergo;
      for (let i = 0; i < comp.length; i++) {
        this.compArr.push({
          name: comp[i].company_name,
          work: comp[i].position,
          end_time: comp[i].end_time,
          start_time: comp[i].start_time,
          des: comp[i].work_content,
          check: false,
        });
      }
      // 作品案例
      this.productArr = [];
      let product = data.works_case;
      for (let i = 0; i < product.length; i++) {
        let img = product[i].works_img.split(",");
        // let imgArr = []
        // for(let j = 0; j < img.length; j++){
        //     imgArr.push({
        //         url:img[j],
        //         file:'',
        //         status:'',
        //         content:'',
        //         message:'',
        //     })
        // }
        // console.log(imgArr)
        this.productArr.push({
          name: product[i].works_name,
          url: product[i].works_url,
          des: product[i].works_content,
          productImg: img,
          check: false,
        });
      }
      // 教育经历
      this.eduArr = [];
      let edu = data.education_undergo;
      for (let i = 0; i < edu.length; i++) {
        this.eduArr.push({
          name: edu[i].school_name,
          leave: edu[i].education,
          start_time: edu[i].start_time,
          end_time: edu[i].end_time,
        });
      }
    },
    getData() {
      cvShow()
        .then((res) => {
          if (res.data.code == 1) {
            this.formInfo = res.data.data;
            this.dataSet(res.data.data);
            // this._work_time = workTime[0]
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch((err) => {
          this.showCont = true;
          this.showTimeOut = true;
        });
    },
    getInfo() {
      My()
        .then((res) => {
          if (res.data.code == 1) {
            if (res.data.data.is_cv == 2) {
              this.getData();
            } else {
              this.showCont = true;
            }
          } else {
            this.showCont = true;
            showToast(res.data.msg);
          }
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
  },
  mounted() {},
  created() {
    this.workArr = this.$converData.getWorkFn();
    this.skillAllArr = this.$converData.getSkillFn();
    this.getInfo();
    // this.showCont = true;
  },
};
</script>
<style scoped lang="less">
.container {
  min-height: 100vh;
  background-color: #e8ecfd;
  .showCont {
    padding-bottom: 2.5rem;
    box-sizing: border-box;
  }
  .bannerCont {
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .bannerImg {
      width: 100%;
    }
  }
  .formCont {
    background-color: #fff;
    width: 92%;
    margin: 0 auto;
    position: relative;
    top: -1rem;
    // margin-top: -6rem;
    padding: 1rem 4%;
    border-radius: 0.75rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
    .formTitle {
      font-size: 0.7rem;
      font-weight: bold;
      margin-bottom: 1rem;
    }
    .flexTitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .addComp {
        font-size: 0.65rem;
        font-weight: normal;
        color: #86a9fb;
      }
      .formTitleMust {
        position: relative;
        display: flex;
        .mustIcon {
          font-size: 0.7rem;
          top: 0rem;
          left: -0.4rem;
          position: absolute;
          color: #ff5757;
        }
      }
    }
    .productCont {
      width: 100%;
      background-color: #e7eeff;
      padding: 0.75rem;
      box-sizing: border-box;
      margin-bottom: 0.75rem;
      border-radius: 0.25rem;
      .productHead {
        font-size: 0.7rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
        justify-content: space-between;
        .productEdit {
          font-weight: normal;
          font-size: 1rem;
        }
      }
      .productDes {
        font-size: 0.6rem;
        color: #333;
        margin-bottom: 0.25rem;
      }
      .productImg {
        margin-top: 0.5rem;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        position: relative;
        .imgItem {
          width: 23.5%;
          overflow: hidden;
          margin-left: 2%;
          display: block;
          height: 3.3rem;
          border-radius: 0.25rem;
          // padding: 0.1rem;
          box-sizing: border-box;
          position: relative;
          border: 0.1rem solid #fff;
          margin-bottom: 0.35rem;
          font-size: 0;
          background-size: cover;
          // img{
          //     // width: 100%;
          //     height: 100%;
          //     border-radius: 0.25rem;
          // }
        }
        .noLeft {
          margin-left: 0;
        }
      }
    }
    .sliderItem {
      width: 100%;
      border-top: 1px dashed #ccc;
      padding: 0.75rem 0;
      box-sizing: border-box;
      .sliderHead {
        display: flex;
        margin-bottom: 0.5rem;
        justify-content: space-between;
        .compEdit {
          font-weight: normal;
          font-size: 1rem;
        }
      }
    }
    .compItem {
      width: 100%;
      padding: 0.75rem 4%;
      box-sizing: border-box;
      background: #e7eeff;
      border-radius: 0.25rem;
      margin-bottom: 0.75rem;
      .compName {
        font-size: 0.7rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
        justify-content: space-between;
        .compEdit {
          font-weight: normal;
          font-size: 1rem;
        }
      }
      .compTag {
        font-size: 0.6rem;
        // display: flex;
        // align-items: center;
        margin: 0.25rem 0;
        color: #333;
        // justify-content: space-between;
        .compTagItem {
          display: flex;
          align-items: center;
          // margin-right: 0.75rem;
          margin-bottom: 0.25rem;
          .iconfont {
            font-size: 0.8rem;
            margin-right: 0.25rem;
          }
          .icon-shijian {
            font-size: 0.7rem;
          }
        }
      }
      .compDes {
        font-size: 0.6rem;
        color: #333;
      }
    }
    .formMustTip {
      text-align: center;
      color: #999;
      font-size: 0.6rem;
      margin-bottom: 1.25rem;
    }
    .addCompBtn {
      border: 1px solid #86a9fb;
      color: #86a9fb;
      background-color: #fff;
      text-align: center;
      padding: 0.6rem;
      font-size: 0.6rem;
      border-radius: 0.25rem;
    }
    .formInput {
      display: flex;
      padding: 0.75rem 1rem;
      box-sizing: border-box;
      align-items: center;
      width: 100%;
      background-color: #e7eeff;
      margin-bottom: 1rem;
      border-radius: 1.5rem;
      .inputName {
        width: 4rem;
        position: relative;
        .mustIcon {
          font-size: 0.7rem;
          top: 0rem;
          left: -0.4rem;
          position: absolute;
          color: #ff5757;
        }
      }
      .resultTag {
        color: #5cc78e;
        font-size: 0.8rem;
      }
      .icon-xiala {
        width: 1.5rem;
        font-size: 0.8rem;
        color: #ccc;
        text-align: center;
      }
      .inputOut {
        flex: 1;
        width: 3rem;
        position: relative;
        .inputMask {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
        input {
          width: 90%;
          border: none;
          background: none;
          outline: none;
        }
      }
      .inputText {
        flex: 1;
        width: 3rem;
        border: none;
        background: none;
        outline: none;
      }
    }
  }
  .maskCont {
    padding: 1.5rem 4%;
    box-sizing: border-box;
    .maskForm {
      width: 100%;
      .formTitle {
        font-size: 0.7rem;
        font-weight: bold;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        position: relative;
        .mustIcon {
          color: #ff5757;
          margin-right: 0.25rem;
        }
      }
      .upProduct {
        margin-bottom: 1.25rem;
      }
      .formInput {
        display: flex;
        padding: 0.75rem 1rem;
        box-sizing: border-box;
        align-items: center;
        width: 100%;
        background-color: #e7eeff;
        margin-bottom: 1rem;
        border-radius: 1.5rem;
        .inputName {
          width: 4rem;
          position: relative;
          .mustIcon {
            font-size: 0.7rem;
            top: 0rem;
            left: -0.4rem;
            position: absolute;
            color: #ff5757;
          }
        }
        .resultTag {
          color: #5cc78e;
          font-size: 1rem;
        }
        .icon-xiala {
          width: 1.5rem;
          font-size: 0.8rem;
          color: #ccc;
          text-align: center;
        }
        .inputOut {
          flex: 1;
          width: 3rem;
          position: relative;
          .inputMask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
          input {
            width: 90%;
            border: none;
            background: none;
            outline: none;
          }
        }
        .inputText {
          flex: 1;
          width: 3rem;
          border: none;
          background: none;
          outline: none;
        }
      }
    }
    .maskHead {
      width: 100%;
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
      .maskHeadTip {
        font-size: 0.6rem;
        font-weight: normal;
        color: #999;
        text-align: center;
      }
      .redTip {
        color: #ff5757;
      }
    }
    .work_timeCont {
      .work_timeItem {
        width: 100%;
        padding: 0.75rem;
        box-sizing: border-box;
        background-color: #e7eeff;
        border-radius: 0.25rem;
        margin-bottom: 0.75rem;
        .timeItemHead {
          display: flex;
          align-items: center;
          margin-bottom: 0.75rem;
          .timeCheck {
            width: 1rem;
            height: 1rem;
            border: 1px solid #86a9fb;
            background-color: #fff;
            font-size: 1rem;
            border-radius: 0.25rem;
            text-align: center;
            line-height: 1rem;
            margin-right: 0.5rem;
            color: #fff;
          }
          .activeCheck {
            background-color: #86a9fb;
          }
          .timeHeadName {
            font-size: 0.8rem;
            font-weight: bold;
          }
        }
        .checkItem {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #333;
          margin-bottom: 0.5rem;
          .checkItemVal {
            display: flex;
            align-items: center;
            .iconfont {
              margin-left: 0.25rem;
              font-size: 0.8rem;
              color: #999;
            }
          }
        }
      }
    }
    .maskCheck {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .maskCheckItem {
        width: 30%;
        text-align: center;
        background-color: #e7eeff;
        padding: 0.55rem 0;
        margin-bottom: 0.75rem;
        border-radius: 0.25rem;
        border: 1px solid #86a9fb;
        box-sizing: border-box;
        color: #86a9fb;
      }
      .maskCheckItemActive {
        background-color: #86a9fb;
        color: #fff;
      }
    }
    .sildNum {
      margin: 0.25rem auto 2rem;
      font-size: 1rem;
      text-align: center;
      span {
        color: #86a9fb;
      }
    }
    .smallText {
      font-size: 0.8rem;
    }
    .sliderCont {
      width: 80%;
      margin: 0 auto;
    }
    .maskCtrl {
      display: flex;
      justify-content: space-between;
      .maskBtn {
        width: 48%;
      }
      .whiteMaskBtn {
        background-color: #fff;
        color: #86a9fb;
      }
    }
    .maskBtn {
      width: 100%;
      text-align: center;
      padding: 0.6rem 0;
      background-color: #86a9fb;
      border: 1px solid #86a9fb;
      color: #fff;
      border-radius: 2rem;
      margin-top: 1.5rem;
    }
    .disMaskBtn {
      opacity: 0.5;
    }
  }
  .formArea {
    background-color: #e7eeff;
    border-radius: 0.25rem;
  }
  .saveBtn {
    position: fixed;
    padding: 0.75rem 0;
    background-color: #86a9fb;
    color: #fff;
    text-align: center;
    border-radius: 2rem;
    width: 92%;
    left: 4%;
    bottom: 0.75rem;
  }
}
</style>
<style>
.van-progress__pivot {
  padding: 0.15rem 0 !important;
}
.van-image__img {
  border-radius: 0.25rem;
}
.van-uploader__preview-delete--shadow {
  padding: 0.15rem;
  /* font-size: 1rem; */
  border-radius: 0 0.25rem 0 12px;
}
.van-uploader__preview-delete-icon {
  transform: scale(1);
  top: 0.12rem;
  right: 0.1rem;
}
</style>
